<script setup lang="ts">
import { getMemberAddressById, postMemberAddress, putMemberAddress } from '@/services/address'
import type { PostMemberAddressData } from '@/types/address'
import { validate, type Rules } from '@/utils/validate'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 表单数据
const form = ref({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(前端展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
})

// 自定义校验规则
const rules: Rules = {
  receiver: [{ required: true, message: '请填写收货人姓名' }],
  contact: [
    { required: true, message: '请填写收货人手机号码' },
    { pattern: /^1\d{10}$/, message: '请填写正确的手机号码' },
  ],
  provinceCode: [{ required: true, message: '请选择收货人所在城市' }],
  address: [{ required: true, message: '请填写详细收货地址' }],
}

// 点击提交表单按钮
const onSubmit = async () => {
  // 如果表单校验失败，退出函数
  if (!validate(form.value, rules)) return
  // 判断修改或添加
  if (query.id) {
    // 如果有 id 调用：修改地址请求
    await putMemberAddress(query.id, form.value)
  } else {
    // 没有 id 调用：添加地址请求
    await postMemberAddress(form.value)
  }
  // 成功提示
  uni.showToast({ title: query.id ? '修改成功' : '添加成功' })
  // 后退到上一页
  setTimeout(() => {
    uni.navigateBack()
  }, 400)
}

// 省/市/县 Picker
const regionChange = (ev: UniHelper.RegionPickerOnChangeEvent) => {
  // 前端展示
  form.value.fullLocation = ev.detail.value.join(' ')
  // 后端参数
  const [provinceCode, cityCode, countyCode] = ev.detail.code!
  // 👍 ES6新增API：Object.assign 合并对象，把省市区编码合并到 form 中
  Object.assign(form.value, { provinceCode, cityCode, countyCode })
}

// 是否默认收获地址
// 🚨 踩坑：小程序有 switch 组件，原生 SVG 有 switch 标签，二者都有 change 事件，两个事件对象类型出现冲突
// 🔔 解决方案：事件对象用联合类型兼容二者，内部再通过 as 断言指定具体类型
const isDefaultChange = (ev: UniHelper.SwitchOnChangeEvent) => {
  // 是否为默认，1为是，0为否
  form.value.isDefault = ev.detail.value ? 1 : 0
}

// 页面参数
const query = defineProps<{
  id?: string
}>()

// 根据 id 获取地址详情
const getMemberAddressData = async () => {
  // 如果有地址 id
  if (query.id) {
    // 根据 id 获取地址详情
    const res = await getMemberAddressById(query.id)
    // 地址合并到表单中，用于点保存时，提交给后端用的
    Object.assign(form.value, res.result)
  }
}

// 页面加载时
onLoad(() => {
  // 修改页面标题
  uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })
  // 获取地址详情
  getMemberAddressData()
})
</script>

<template>
  <view class="viewport">
    <!-- 地址信息 -->
    <view class="form">
      <view class="form-item">
        <text class="label">收货人</text>
        <input v-model="form.receiver" placeholder="请填写收货人姓名" />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input v-model="form.contact" placeholder="请填写收货人手机号码" />
      </view>
      <view class="form-item">
        <text class="label">所在地区</text>
        <picker mode="region" @change="regionChange" :value="form.fullLocation.split(' ')">
          <view v-if="form.fullLocation" class="region"> {{ form.fullLocation }} </view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input v-model="form.address" placeholder="街道、楼牌号信息" />
      </view>
      <view class="form-item">
        <text class="label">设为默认地址</text>
        <switch color="#27ba9b" @change="isDefaultChange" :checked="form.isDefault === 1" />
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="button" @tap="onSubmit">保存并使用</view>
  </view>
</template>

<style>
page {
  background-color: #f4f4f4;
}

.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
}

.form .form-item {
  display: flex;
  min-height: 96rpx;
  line-height: 46rpx;
  padding: 25rpx 10rpx;
  background-color: #fff;
  font-size: 28rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
}

.form .form-item:last-child {
  border: none;
}

.form .form-item .label {
  width: 200rpx;
  color: #333;
}

.form .form-item input {
  flex: 1;
  display: block;
  height: 46rpx;
}

.form .form-item switch {
  position: absolute;
  right: -10rpx;
  transform: scale(0.7) translateY(-8px);
}

.form .form-item picker {
  flex: 1;
}

.form .form-item .region {
  color: #333;
}

.form .form-item .placeholder {
  color: #888;
}

.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
